<template>
  <div class="movies">
    <ul>
      <li
        v-for="item in moviesList"
        :key="item._id"
        @click="goToDetail(item.movieid)"
      >
        <img :src="formatUrl(item.img)" alt="" />
        <h2>{{ item.nm }}</h2>
        <span class="score" v-if="item.sc">
          <span style="color: #666; font-weight: 500; font-size: 13px"
            >观众评分：</span
          >
          {{ item.sc }}</span
        >
        <span class="score" v-else
          >{{ item.wish }}
          <span style="color: #666; font-weight: 500; font-size: 13px"
            >人想看</span
          ></span
        >
        <span class="sp1">{{ item.star }}</span>
        <span class="sp2">{{ item.showInfo }}</span>
        <div class="maiyu1" v-if="item.showst === 3">购买</div>
        <div class="maiyu2" v-else>预售</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { moviesApi, moviesMoreApi } from "@/api/api";
import { nextTick } from "vue";
export default {
  data() {
    return {
      moviesList: [],
      // 表示所有的电影的id
      ids: [],
      // 表示电影的总条数
      count: 0,
      // 起始的索引
      startIndex: 0,
      // 每次拉去的条数
      size: 6,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await moviesApi();
      // console.log(res);
      this.moviesList = res.result;
      this.ids = res.ids;
      this.count = res.count;
      this.startIndex = res.result.length;

      // nextTick(() => {
      //   this.$emit("addbs");
      // });

      await nextTick();
      this.$emit("addbs");
    },
    formatUrl(url) {
      return url.split("/w.h").join("/64.95");
    },
    async getMore() {
      const newids = this.ids.slice(
        this.startIndex,
        this.startIndex + this.size
      );
      // console.log(newids);

      const str = newids.join(",");

      const res = await moviesMoreApi({ ids: str });
      // console.log(res);
      // 将得到的数据合并到原数组上
      this.moviesList = [...this.moviesList, ...res.result];
      this.startIndex += this.size;

      await nextTick();
      // 调用父组件的重新计算高度的方法
      this.$emit("refresh", this.count > this.moviesList.length);
    },
    goToDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>

<style lang="less" scoped>
li {
  height: 114px;
  border-bottom: 1px solid @border-color;
  font-size: 14px;
  position: relative;
  background-color: #fff;

  h2 {
    font-size: 18px;
    position: absolute;
    top: 10px;
    left: 90px;
    font-weight: 500;
    color: black;
  }

  img {
    width: 64px;
    height: 90px;
    margin: 12px 0 0 15px;
  }
  .score {
    color: #faaf00;
    font-size: 15px;
    position: absolute;
    top: 35px;
    left: 90px;
    font-weight: 900;
  }
  .sp1 {
    position: absolute;
    top: 55px;
    left: 90px;
  }
  .sp2 {
    position: absolute;
    top: 75px;
    left: 90px;
  }

  .maiyu1 {
    width: 54px;
    height: 28px;
    background-color: @theme-color;
    color: white;
    text-align: center;
    font-size: 16px;
    line-height: 28px;
    border-radius: 14px;
    position: absolute;
    top: 40px;
    right: 10px;
  }
  .maiyu2 {
    width: 54px;
    height: 28px;
    background-color: blue;
    color: white;
    text-align: center;
    font-size: 16px;
    line-height: 28px;
    border-radius: 14px;
    position: absolute;
    top: 40px;
    right: 10px;
  }
}
</style>
